<template> 
  <div class="shen">
    <el-dialog
      :title="pid?'编辑':'新增'"
      :visible.sync="centerDialogVisible"
      width="75%"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :before-close="close"
      class="dialog"

      >
      <div style="max-width:1000px;margin:auto;">
    <span class="borderNone">
      <!-- <p class="shenqing">支付状态<el-switch style="margin-left:15px" v-model="form.paymentState" active-text="已支付" inactive-text="未支付" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949"></el-switch></p> -->
      
      <p class="shenqing">申请信息</p>
      <table border="1" rules="all" class="tablestyle" style="width: 1100px">
        <tr>
          <td style="height: 34px;text-align: center;width: 100px">设备名称</td>
          <td style=" padding-left: 10px;cursor: pointer" @click="cgjhBtn">
            {{form.deviceName}}({{form.deviceCode}})
          </td>
          <td style="height: 34px;text-align: center;">外委单位</td>
          <td >
            <el-input v-model="form.delegateUnit" placeholder=""></el-input>
          </td>
        </tr>
        <tr>
          <td style="width: 164px;height: 53px;text-align: center;">预计金额</td>
          <td   style="width: 415px" class="beizhu">
           <el-input v-model="form.estimatedAmount" placeholder=""></el-input>
          </td>
           <td style="width: 164px;height: 53px;text-align: center;">工期要求</td>
          <td   style="width: 415px" class="beizhu">
           <el-input v-model="form.timeLimitForAProject" placeholder=""></el-input>
          </td>
        </tr>
        <tr>
          <td style="width: 164px;height: 53px;text-align: center;">外委理由</td>
          <td  colspan="3" style="width: 415px" class="beizhu">
            <el-input
              type="textarea"
              autosize
              :autosize="{ minRows: 2, maxRows: 2}"
              placeholder="请输入内容"
              v-model="form.reason">
            </el-input>
          </td>
        </tr>
      </table>

      <p class="shenqing">关联报修单</p>
      <div style="margin-left: 15px;margin-bottom: 15px">
        <el-button type="primary"  icon="el-icon-plus" size="mini" @click="choose">添加报修单</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteBtn">删除</el-button>
      </div>

      <el-table  :data="form.dqmwoList" stripe style="margin-left: 15px;width: 1100px"
                 @selection-change="handleSelectionChange"
                 border>
        <el-table-column align="center" type="selection" width="80"></el-table-column>
        <el-table-column align="center" type="index" label="序号"  width="55"  />
        <el-table-column align="center" label="维修单号" property="oddNumber" width="200" > </el-table-column>
        <el-table-column align="center" label="报修人" property="repairsUserName" :show-overflow-tooltip="true"  > </el-table-column>
        <el-table-column align="center" label="故障类型"  property="typeName"  > </el-table-column>
        <el-table-column align="center" label="故障等级"  property="faultState" width="100" > 
           <template slot-scope="scope">
            <div class="status camBlue" v-if="scope.row.faultState==1">一般</div>
            <div class="status yellow" v-if="scope.row.faultState==2">严重</div>
            <div class="status red" v-if="scope.row.faultState==3">紧急</div>
            <div class="status blue" v-if="scope.row.faultState==4">技术改造</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="报修时间"  property="theRepairTime" :show-overflow-tooltip="true" > </el-table-column>
      </el-table>
    </span>

    <div class="shenqing" style="margin-top: 15px;width: 1100px">
      <el-upload
        :action="baseUrl()+'/common/upload'"
        :on-success="fileSuccess"
        :show-file-list="false"
        >
        <el-button size="mini" type="warning" icon="el-icon-folder-add">相关附件</el-button>
      </el-upload>
      <div class="unloadBox">
        <!-- <div class="img" v-for="(item,index) in form.dqmaList">
          <el-image :src="baseUrl()+item.accessoryUrl" :preview-src-list="[baseUrl()+item.accessoryUrl]"></el-image>
          <i class="el-icon-close" @click="imgDel(index,item.accessoryUrl)"></i>
        </div> -->
        <div class="file" v-for="(item,index) in form.dqmaList">
          <span class="index">{{index+1}}、</span>
          <span class="blue">{{item.accessoryName}}</span>
          <i class="blue el-icon-delete" @click="fileDel(index,item.accessoryUrl)"></i>
        </div>
      </div>
      
    </div>
    <!-- <p class="shenqing">审核人</p>
    <div style="width: 1100px;height: 50px;line-height: 50px;border: 1px solid #cccccc;margin-left: 15px;padding-left: 15px">
      <el-checkbox-group v-model="checkboxGroup" @change="jainting(checkboxGroup)" :true-label="xuanzhong">
        <el-checkbox v-for="item in cities" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>
      </el-checkbox-group>
    </div> -->

    <div style="text-align: center;margin-top: 50px;width: 1100px">
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="saveBtn(1)">保存</el-button>
      <el-button type="success"  icon="el-icon-plus" size="mini" @click="saveBtn(2)">提交</el-button>
    </div>
      </div>
    </el-dialog>
    <add-Product :routerData="transmitData" v-if="addshow" @callback="callback" ></add-Product>
    <cgjhd-Dialog v-if="jihuadShow" :jihuaData="jihuaData" @selectChange="jhdback" @chooseInfo="chooseInfo"></cgjhd-Dialog>

  </div>
</template>

<script>
  import { treeselect } from "@/api/system/dept";
  import addProduct from "../components/selectTheWarrantyDialog";
  import cgjhdDialog from "./addDialog"
  import {fileDelete,fileDownload,fileDeleteLibrary} from '@/api/basicInformation/index'
  import {repairAdd,repairDes,repairEdit,repairxunList} from '@/api/repair/index'
  export default {
    name: "Role",
    props:['pid'],
    components:{
      addProduct,
      cgjhdDialog,
    },
    data() {
      return {
        xuanzhong:[],
        cities:[
          {value:'1',label:'张三'},
          {value:'2',label:'李四'},
          {value:'3',label:'王二'},
        ],
        checkboxGroup:[],
        jihuaData:{},//传给计划单弹框的数据
        jihuadShow:false,//计划单弹框
        addshow:false,
        transmitData:{},//传给子集的数据
        shuliangSum:0,//总数量
        jinesum:0,//总金额
        tableDataxunz:'',
        dialogVisible:false,
        
        tableDatajihua:[],
        tableDatajihuaXZ:[],//选中的数据
        form:{
          dqmaList:[],
          dqmwoList:[]
        },
        centerDialogVisible:true,

      };
    },

    created() {
      if(this.pid){
        this.getData()
      }
      // this.hejisum()
    },
    methods: {
      close(){
        this.$emit('subSetChane')
      },
      getData(){
        repairDes(this.pid).then((res)=>{
          if(res.code==200){
            this.form=res.data
          }
        })
      },
      chooseInfo(info){
        this.form.deviceCode=info.deviceCode
        this.form.deviceId=info.id
        this.form.deviceName=info.deviceName
        this.jihuadShow = false
      },
      fileSuccess(res) {
        //文件上传成功
        this.form.dqmaList.push({ accessoryName: res.fileName, accessoryUrl: res.filePath})
      },
      async imgDel(index,filePath){
        for(let i=0;i<this.form.dqmaList.length;i++){
          if(index==i){
            if(this.form.dqmaList[i].id){
              await fileDeleteLibrary(this.form.dqmaList[i].id)
            }else{
              await fileDelete(this.form.dqmaList.filePath);
            }
            this.form.dqmaList.splice(i, 1);
          }
        }
      },
      async fileDel(index, filePath){
        //删除文件
        await fileDelete(filePath)
        this.form.dqmaList.splice(index, 1)
      },
      //监听
      jainting:function(row){
        console.log('jianting',row)
        console.log('选择',this.xuanzhong)
      },
      cgjhBtn:function(){
        
        this.jihuadShow = true
      },
      //计划单弹框回调函数
      jhdback:function(msg){
        this.jihuadShow= false
        this.shenqingxinxi.caigoujihua = msg.deviceName
        console.log('返回数据',msg)
      },
      //弹框关闭回调函数
      callback:function(msg){
        this.addshow= false
        console.log('返回数据',msg)
        this.form.dqmwoList = msg
      },

      //附件删除
      handleChange(file, fileList) {
        this.fileList = fileList.slice(-3);
      },
      //表格复选框监听
      handleSelectionChange:function(row){
        this.tableDatajihuaXZ = row

      },
      //类型监听
      leixingchange:function(row){
        console.log('row',row)

      },
      //添加
      add:function () {
        console.log('添加')
        var indexSun = this.tableDatajihua.length
        this.tableDatajihua.push(
          { index:indexSun,jhdh:'',biaoti:'',danwei:'',cglx:'',cgsl:'',jhje:'',cjrq:'',cjren:'',beizhu:'',dqjd:'',spzt:'',spjssj:'',xiaoji:''},
        )

      },

      //删除
      deleteBtn:function () {
        if(this.form.dqmwoList.length&&this.tableDatajihuaXZ.length){
          
          this.form.dqmwoList.forEach((i,index)=>{
            this.tableDatajihuaXZ.forEach((j)=>{
              if(i==j){
                this.form.dqmwoList.splice(index,1)
              }
            })
          })
        }
        
        console.log(' this.tableDatajihua', this.tableDatajihua)
        this.fuzhiIndex()
      },
      //重新赋值index
      fuzhiIndex:function(){
        for (var i=0;i<this.tableDatajihua.length;i++){
          this.tableDatajihua[i].index =i
        }
      },
      //选择报修单
      choose:function () {
        if(!this.form.deviceId){
          this.$message.warning('请选择设备！')
          return false
        }
        // this.dialogVisible = true
        this.addshow=true
        var pp=this.form.deviceId
        this.transmitData=pp

      },
      //产品表格监听
      chanpinonChange(val) {
        console.log(val)
      },
      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      //数量监听事件
      shulaingBtn:function (row) {
        console.log(row)
        row.xiaoji = (row.cgsl*1)* (row.jhje*1)
        this.hejisum()
      },
      //单价监听事件
      yjdjBtn:function (row) {
        console.log(row)
        row.xiaoji = (row.cgsl*1)* (row.jhje*1)
        this.hejisum()
      },
      //合计
      hejisum:function () {
        var shuchushi=0
        var jinechushi=0
        for (var i=0;i<this.tableDatajihua.length;i++){
          shuchushi =shuchushi + (this.tableDatajihua[i].cgsl)*1
          jinechushi = jinechushi+ (this.tableDatajihua[i].xiaoji)*1

        }
        this.shuliangSum = shuchushi
        this.jinesum = jinechushi

      },
      //保存
      saveBtn:function (flag) {
        if(flag==2){
          this.form.verifyStatus=0
        }
        this.form.submitState=flag
        if(this.pid){
          //修改
          repairEdit(this.form).then((res)=>{
            if(res.code==200){
              this.$message.success(res.msg)
              // this.$router.push('/maintain/wwwx')
              this.$emit('subSetChane',1)
            }
          })
        }else{
          //添加
          repairAdd(this.form).then((res)=>{
            if(res.code==200){
              this.$message.success(res.msg)
              // this.$router.push('/maintain/wwwx')
              this.$emit('subSetChane',1)
            }
          })
        }
        

      }
    }
  };
</script>
<style lang="scss" scoped>
.dialog >>> .el-dialog__body{
    height: 85vh;
    overflow: scroll;
  }
.shen >>> .el-input__inner,.shen >>> .el-textarea__inner{
  border: none;
}
  .shenqing{
    color: #05A380;
    font-weight: 700;
    margin-left: 15px;

  }

  .tablestyle {
    margin-left: 15px;
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;
  }
  .shen .borderNone .el-input--medium .el-input__inner {
    border: none;
  }
  .leixing .el-select{
    width: 100%;
  }
  .caigoustyle {
    width: 100%;

  }
  .shen .beizhu .el-textarea__inner {
    border: none;
  }
  .chuanpin {

  }
  .unloadBox{
      border: 1px solid #cccccc;
      margin-top:20px;
      min-height: 50px;
      overflow: hidden;
      .file{
        width:100%;
        border-top:1px #cccccc dotted;
        line-height: 50px;
        .index{
          padding:0 10px;
          color:#666
        };
        i{
          float: right;
          line-height: 50px;
          padding-right: 10px;
          font-size: 20px;
          cursor: pointer;
        }
        .type{
          color: #666;
          float: right;
          padding-right: 30px;
        }

      }
      .img{
        margin:10px 0 10px 10px;
        text-align: center;
        float: left;
        position: relative;
        width:110px;
        height:100px;
        .el-image{
          width:100px;
          height:100px;
          border: 1px solid #cccccc;
          position: absolute;
          top:0;
          left:0;
        }
        i{
          position: absolute;
          right: 0px;
          font-size: 20px;
          top: -4px;
          z-index: 1;
        }
      }



    }



</style>
